<template>
	<view>
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
<!-- 		<u-navbar back-text="返回" :back-text-style="{color:color}" :is-back="true" title="主力排行" 
		:background="background" :back-icon-color="color" :title-color="color">
			<slot slot="right">
				<u-icon name="reload" @click="reload()" :color="color" size="44" style="padding-right: 30rpx;"></u-icon>
			</slot>
		</u-navbar> -->
		<searchHead goback='gobackF' title='主力排行' searchTip='searchimg'></searchHead>
		<view class="content">
			<view class="table-box table-data">
				<z-table :tableData="tableData" 
				:columns="columns" 
				:emptyText="emptyText"
				:showLoading="false"
				:tableHeight="tableHeight"
				:stickSide="true"></z-table>
			</view>
			
			<u-loadmore :status="status" @loadmore="Loadmore()" :load-text="loadText"/>
		</view>
		
	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	import zTable from "@/components/z-table/z-table.vue";
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();	
	export default {
		components: {
			searchHead,
			zTable
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				background: {
					backgroundColor: 'rgb(30, 30, 30)',
				},
				color:"#CCC",
				tableHeight:((windowHeight - 42) * (750 / windowWidth)),
				tableData:[],
				emptyText:"没有数据哦！请选择其它时间查看~",
				columns:[{
					'title':'股票名称',
					'key':'name',
					'width':'250',
				},{
					'title':'股票现价',
					'key':'price',
					'width':'150',
				},{
					'title':'今日主力净占比',
					'key':'today_net_share',
					'width':'200',
				},{
					'title':'今日排名',
					'key':'today_ranking',
					'width':'150',
				},{
					'title':'今日涨跌',
					'key':'today_up_down',
					'width':'150',
				},{
					'title':'五日主力净占比',
					'key':'five_net_share',
					'width':'200',
				},{
					'title':'五日排名',
					'key':'five_ranking',
					'width':'180',
				},{
					'title':'五日涨跌',
					'key':'five_up_down',
					'width':'180',
				},{
					'title':'十日主力净占比',
					'key':'ten_net_share',
					'width':'200',
				},{
					'title':'十日排名',
					'key':'tee_ranking',
					'width':'180',
				},{
					'title':'十日涨跌',
					'key':'ten_up_down',
					'width':'180',
				},{
					'title':'归属板块',
					'key':'plate',
					'width':'180',
				},
				],
				status: 'loadmore',
				loadText: {
							loadmore: '点击加载更多',
							loading: '努力加载中',
							nomore: '实在没有了'
						},
				page: 1,
			}
		},
		methods: {
			reload(){
				this.tableData = [];
				this.page = 1;
				this.getTableData()
			},
			getTableData(){
				this.$Request.get(this.$api.index.getmainforce,{
					page:this.page
				}).then(res => {
					if(res.code == 0){
						let data = res.data;
						for(let index in data){
							data[index].name = "<uni-view class='title'>"+data[index].name+"</uni-view> <uni-view class='code'>"+data[index].code+"</uni-view>"
							
							
							data[index].today_net_share = this.isSuccess(data[index].today_net_share)

							data[index].today_up_down = this.isSuccess(data[index].today_up_down)
							
							
							data[index].five_net_share = this.isSuccess(data[index].five_net_share)
							
							data[index].five_up_down = this.isSuccess(data[index].five_up_down)
							
							data[index].ten_net_share = this.isSuccess(data[index].ten_net_share)
							
							data[index].ten_up_down = this.isSuccess(data[index].ten_up_down)
							
							this.tableData.push(data[index])
						}
						this.status = 'loadmore'
					}
					
				})
			},
			isSuccess(numim){
				let num = Number(numim)
				if(num > 0){
					num = "<text style='color:rgb(222, 46, 46)'>"+num+"%</text>"
				}else if(num < 0){
					num = "<text style='color:#19be6b'>"+num+"%</text>"
				}
				return num;
			},
			Loadmore(){
				this.status = 'loading';
				this.page++;
				this.getTableData();
			},
			onReachBottom() {
				this.status = 'loading';
				this.page++;
				this.getTableData();
			}
		},
		created() {
			this.getTableData(this.current)
		}
	}
</script>

<style lang="less" scoped>
	//table 样式修改
	/deep/.z-table {
		border: none;
		.table-empty{
			margin-top: 20rpx;
		}
		.z-table-title {
			// display: none;
			height: 90rpx;
			font-weight: bold;
			.z-table-title-item{
				background: #efefef;
				border: none;
				height: 100%;
			}
		}
		.z-table-col-text{
			text-align: center !important;
			font-size: 26rpx;
			uni-view{
				width: 100%;
			}
		}
		.z-table-stick-side{
			border: none;
		}
		.z-table-container-row{
			height: 90rpx;
			.z-table-container-col{
				line-height: unset !important;
				height: 100%;
				.title{
					font-size: 28rpx;
					font-weight: bold;
				}
				.code{
					font-size: 22rpx;
				}
			}
		}
	}
	.date_show{
		background-color: #efefef;
		height: 70rpx;
		border-bottom: 2px solid #fdfdfd;
		text-align: center;
		line-height: 70rpx;
	}
	.list-title{
		background-color: #efefef;
		border-top: 1px solid #fdfdfd;
		height: 90rpx;
		font-weight: bold;
		.u-col{
			text-align: center !important;	
		}
	}
</style>
